<template>
	<div class="cancel-wrap">
		<div v-title style="display: none">申请退款</div>
		<div class="cancel-title">
	        <span class="icon"></span>
	        <span class="span1">申请原因</span>
	  	</div>
	  	<div class="cancel-reason">
	  		<select v-model="reason">
	  			<option>教练没空</option>
	  			<option>本人没空</option>
	  			<option>不想约了</option>
	  			<option>约错时间</option>
	  			<option>其他原因</option>
	  		</select>
	  		<span class="down"></span>
	  	</div>
	  	<textarea class="comment-content" placeholder="备注" v-model="remark"></textarea>
	  	<div class="confirm-fix"></div>
		<div class="one-footer">
	  		<div class="order-footer-pay">
	    		<span class="span-order" @click="tooltip">提交</span>
	  		</div>
		</div>
		<notification notification="款项将于48小时内原路返回您的账户。如有疑问或退款未到账，请联系客服。" title="提示" isWithdraw="singleCallback" v-show="this.notice.tip" v-on:gettooltip="showtooltip"></notification>
	</div>
</template>
<script type="text/ecmascript-6">
import notification from 'components/notification/notification';
export default {
    props: {
    },
    data() {
      return {
        reason: '教练没空',
        remark: '',
        status: '',
        notice: {
			tip: '',
			response: ''
        }
      };
    },
    created() {
      let orderid = this.$route.query.order_id;
      this.$http.post('api/course/ordercheckpayments/', {order_num: orderid, mobile: window.localStorage.cphone}).then(response => {
        this.status = response.body.coach_arr.status;
      });
    },
    watch: {
      getresponse: function(newdata, olddata) {
        if (newdata === 'ok') {
          this.submit();
        }
      }
    },
    computed: {
      getresponse() {
        return this.notice.response;
      }
    },
    methods: {
		showtooltip(msg) {
			this.notice.tip = msg.tooltip;
			this.notice.response = msg.response;
		},
		tooltip() {
			this.notice.tip = 'true';
		},
		submit() {
			let orderid = this.$route.query.order_id;
			if ((this.status === 'nonpay')) {
				this.$http.post('api/course/uppaymentsstatus/', {order_num: orderid, status: 'closed', remark: this.remark, reason: this.reason}).then(response => {
					this.$router.replace({path: '/#myself'});
					this.$router.push({path: '/orderdetail/', query: {order_id: orderid}});
				});
			} else if (this.status === 'notused') {
				this.$http.post('api/course/uppaymentsstatus/', {order_num: orderid, status: 'await', remark: this.remark, reason: this.reason}).then(response => {
					let status = response.body.status;
					if (status === 'closed') {
						this.$router.replace({path: '/#myself'});
						this.$router.push({path: '/orderdetail/', query: {order_id: orderid}});
					} else {
						this.$router.replace({path: '/#myself'});
						this.$router.push({path: '/orderdetail/', query: {order_id: orderid}});
					}
				});
			}
		}
    },
    components: {
      notification
    }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
	.cancel-wrap
		.cancel-title
			height 40px
			width 100%
			background-color white
			line-height 40px
			font-size 16px
			border-1px($border)
			.icon
				display inline-block
				float left
				margin-left 15px
				margin-top 13px
				bg-image('cancel')
				square-icon(rgb(255,255,255),15px)
			.span1
				margin-left 4px
				font-size 16px
		.cancel-reason
			height 40px
			width 100%
			background-color white
			line-height 40px	
			text-align center
			border-1px($border)
			select
				font-size 15px
				border none
				appearance none
				background-color white
				color $se-fn
			.down
				display inline-block
				margin-top 17.5px
				icon-image('inverted')
				rectangle-icon(rgb(255,255,255),8px,5px)
		.comment-content
			height 100px
			width 100%
			box-sizing border-box
			background-color bg-white
			border none
			padding 12px 17px 0px
			line-height 22px
			font-size 16px
			overflow-x hidden
		.confirm-fix
			height 55px
			width 100%
		.one-footer
			height 47px
			position fixed
			bottom 0px
			width 100%
			.order-footer-pay
				margin-left 0px
				margin-right 0px
				display flex
				justify-content space-between
				background-color rgba(33,33,33,0.8)
				.span-order
					text-align center
					background-color $theme
					width 30%
					font-size 16px
					display inline-block
					margin-left 70%
					color $bg-white
					line-height 47px
</style>